<template>
  <div class="searchList">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item title="价格排序" v-model="sort" :options="priceArr" @change="changeSort"/>
      <van-dropdown-item title="类别" v-model="type" :options="typeNameArr" @change="changeType"/>
    </van-dropdown-menu>

    <div class="productList" v-if="productList.length>0">
      <product-list-vue :productList="productList"></product-list-vue>
    </div>

    <div class="none" v-else>
      <img src="../../assets/img/empy/暂无搜索结果.png" alt="" style="width:100%;">
      <div class="button" @click="$router.push('/popup')">未找到相关内容</div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import ProductListVue from '../product/ProductList.vue';
export default {
  props:{
    productList:{
      type:Array,
      default:()=>[]
    }
  },
  components:{
    ProductListVue
  },
  data(){
    return({
      value1:0,
      sort:'desc',
      type:null,
      option1:[
        { text:'全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      priceArr:[
        { text: '由低到高', value: 'asc' },
        { text: '由高到低', value: 'desc' },
      ],
    })
  },
  computed:{
    ...mapGetters(['typeNameArr'])
  },
  methods:{
    changeSort(value){
      this.sort = value
      this.$parent.onSearch()
    },
    changeType(value){
      this.type = value
      this.$parent.onSearch()
    }
  }
}
</script>

<style scoped>
.productList{
  padding:10px 3px;
}
.button{
    height:40px;
    width:130px;
    background: orange;
    color: #fff;
    text-align: center;
    line-height: 40px;
    margin:0 auto;
  }
</style>